<template>
  <div>
    <div class="tab-card" style="margin-top: 12px">
      <el-tabs v-model="activeName">
        <el-tab-pane label="仪表盘" name="panel"></el-tab-pane>
        <el-tab-pane label="收藏" name="collect"></el-tab-pane>
        <el-tab-pane label="分享" name="share"></el-tab-pane>
      </el-tabs>
    </div>
    <div v-if="activeName === 'panel'" style="padding: 0 16px">
      <div v-for="item in list" :key="item.id" class="card" style="margin-top: 12px">
        <div class="title">{{ item.label }}</div>
        <el-row>
          <el-col v-for="item1 in item.childList" :key="item1.id" :span="8" class="item">
            <div class="item-detail" @click="toDetail(item1.id)">
              <img v-if="item1.url" :src="item1.url" class="icon" />
              <div v-else class="icon">
                <i class="el-icon-data-line"></i>
              </div>
              <div class="label">{{ item1.label }}</div>
            </div>
            <img
              v-if="collectIds.includes(item1.id)"
              src="~@/assets/m-image/active.png"
              alt=""
              class="status-icon"
              @click="unCollect(item1.id)"
            />
            <img v-else src="~@/assets/m-image/inactive.png" alt="" class="status-icon" @click="toCollect(item1.id)" />
          </el-col>
        </el-row>
      </div>
      <div v-if="!list.length" class="card" style="margin-top: 12px">
        <div class="empty" style="height: 100px; line-height: 100px">暂无数据</div>
      </div>
    </div>
    <div v-if="activeName === 'collect'" style="padding: 0 16px">
      <div class="card" style="margin-top: 12px">
        <!-- <div class="title">{{ item.label }}</div> -->
        <el-row v-if="collectList.length">
          <el-col v-for="item in collectList" :key="item.storeId" :span="8" class="item">
            <div class="item-detail" @click="toDetail(item.panelGroupId)">
              <img v-if="item.url" :src="item.url" class="icon" />
              <div v-else class="icon">
                <i class="el-icon-data-line"></i>
              </div>
              <div class="label">{{ item.name }}</div>
            </div>
          </el-col>
        </el-row>
        <div v-else class="empty">暂无数据</div>
      </div>
    </div>
    <div v-if="activeName === 'share'" style="padding: 0 16px">
      <div class="card" style="margin-top: 12px">
        <div class="title">分享给我</div>
        <el-row v-if="shareIn.length">
          <el-col v-for="item in shareIn" :key="item.id" :span="8" class="item">
            <div class="item-detail" @click="toDetail(item.id)">
              <img v-if="item.url" :src="item.url" class="icon" />
              <div v-else class="icon">
                <i class="el-icon-data-line"></i>
              </div>
              <div class="label">{{ item.name }}</div>
            </div>
          </el-col>
        </el-row>
        <div v-else class="empty" style="height: 100px; line-height: 100px">暂无数据</div>
      </div>
      <div class="card" style="margin-top: 12px">
        <div class="title">我分享的</div>
        <el-row v-if="shareOut.length">
          <el-col v-for="item in shareOut" :key="item.id" :span="8" class="item">
            <div class="item-detail" @click="toDetail(item.id)">
              <img v-if="item.url" :src="item.url" class="icon" />
              <div v-else class="icon">
                <i class="el-icon-data-line"></i>
              </div>
              <div class="label">{{ item.name }}</div>
            </div>
          </el-col>
        </el-row>
        <div v-else class="empty" style="height: 100px; line-height: 100px">暂无数据</div>
      </div>
    </div>
  </div>
</template>
<script>
import { groupTree } from '@/api/panel/panel'
import { enshrineList, saveEnshrine, deleteEnshrine } from '@/api/panel/enshrine'
import { loadShareOutTree, loadTree } from '@/api/panel/share'
import { imgUrlTrans } from '@/components/canvas/utils/utils'
export default {
  data() {
    return {
      activeName: 'panel',
      groupForm: {
        name: null,
        pid: null,
        panelType: 'self',
        nodeType: null,
        children: [],
        sort: 'create_time desc,node_type desc,name asc',
      },
      list: [],
      collectList: [],
      shareIn: [],
      shareOut: [],
    }
  },
  computed: {
    collectIds() {
      return this.collectList.map((item) => item.panelGroupId)
    },
  },
  watch: {
    activeName: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {
    // this.getData()
  },
  methods: {
    getData() {
      if (this.activeName === 'panel') {
        groupTree(this.groupForm).then((res) => {
          let list = res.data
            .map((item) => ({ ...item, childList: this.formater(item.children).filter((item) => item.mobileLayout) }))
            .filter((item) => !!item.childList.length)
          this.list = list
        })
        this.getCollect()
      } else if (this.activeName === 'collect') {
        this.getCollect()
      } else if (this.activeName === 'share') {
        loadShareOutTree({}).then((res) => {
          this.shareOut = this.formater1(res.data)
        })
        loadTree({}).then((res) => {
          this.shareIn = this.formater1(res.data)
        })
      }
    },
    getCollect() {
      enshrineList({}).then((res) => {
        this.collectList = res.data.map((item) => {
          let url
          if (item.extend1) {
            url = JSON.parse(item.extend1)?.url || ''
          }
          return {
            ...item,
            url: url ? imgUrlTrans(url) : '',
          }
        })
      })
    },
    toCollect(id) {
      saveEnshrine(id).then((res) => {
        if (res.success) {
          this.getCollect()
        }
      })
    },
    unCollect(id) {
      deleteEnshrine(id).then((res) => {
        if (res.success) {
          this.getCollect()
        }
      })
    },
    formater(children, key) {
      if (!children || !children.length) return []
      let result = []
      for (let val of children) {
        let url
        if (val.extend1) {
          url = JSON.parse(val.extend1)?.url || ''
        }
        if (val.nodeType === 'panel') result.push({ ...val, url: url ? imgUrlTrans(url) : '' })
        else if (val.nodeType === 'folder') {
          let childResult = this.formater(val.children)
          result.push(...childResult)
        }
      }
      return result
    },
    formater1(children) {
      if (!children || !children.length) return []
      let result = []
      for (let val of children) {
        let url
        if (val.extend1) {
          url = JSON.parse(val.extend1)?.url || ''
        }
        if (val.id) result.push({ ...val, url: url ? imgUrlTrans(url) : '' })
        else {
          let childResult = this.formater1(val.children)
          result.push(...childResult)
        }
      }
      return result
    },
    toDetail(resourceId) {
      this.$router.push({
        path: '/m-index/m-link',
        query: {
          resourceId,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.tab-card {
  margin: 0 16px;
  background-color: rgba($color: #fff, $alpha: 0.8);
  box-shadow: 0px 5px 12px 0px #dcecf6;
  border-radius: 8px;
  display: flex;
  justify-content: center;
}

.card {
  padding: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 100%);
  border-radius: 8px;
  border: 0px solid;
  border-image: linear-gradient(0deg, rgba(41, 179, 249, 1), rgba(54, 178, 137, 1), rgba(136, 204, 102, 1)) 0 0;
  box-shadow: 0px 2px 6px 0px #dcecf6;

  .title {
    color: #262626;
    font-size: 14px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    &::before {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: var(--primary-color);
      margin-right: 12px;
    }
  }

  .item {
    padding-top: calc(100% / 3);
    position: relative;

    .item-detail {
      position: absolute;
      top: 4px;
      left: 4px;
      width: calc(100% - 8px);
      height: calc(100% - 8px);
      background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
      box-shadow: 0px 2px 6px 0px #dcecf6;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-top: 10%;
      padding-left: 4px;
      padding-right: 4px;

      .icon {
        width: 32px;
        height: 32px;
        text-align: center;
        line-height: 32px;
        font-size: 24px;
      }

      .label {
        font-size: 14px;
        color: #262626;
        margin-top: 6px;
        text-align: center;
      }
    }

    .status-icon {
      width: 27.5px;
      height: 26px;
      position: absolute;
      z-index: 1;
      right: 4px;
      top: 4px;
    }
  }
}

::v-deep {
  .el-tabs__header {
    margin-bottom: 0px;
  }

  .el-tabs__item {
    height: 48px;
    line-height: 44px;
    width: 80px;
    text-align: center;
  }

  .el-tabs__nav-wrap::after {
    display: none;
  }
}

.empty {
  height: 100px;
  line-height: 100px;
  background-color: #fff;
  text-align: center;
}
</style>
